<template>

	<view style="background-color: #dddee3;height: 100%;">
		<view style="padding-top: 70rpx;">
			<view class="kuang">
				<image :src="ShoujiURL" style="width: 480rpx;height: 480rpx;"></image>
				<view>
					<p>已绑定手机号<span style="padding-left: 15rpx;">{{phone}}</span></p>
					<u-line color="#898a8b"></u-line>
					<view style="padding-top: 10px;width: 300rpx;">
						<u-code-input @change="change" @finish="finish" :maxlength="4" :space="3" mode="line"
							color="#1ac4ff" borderColor="#1ac4ff"></u-code-input>
					</view>
					<view class="wrap2">
						<u-toast ref="uToast"></u-toast>
						<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
						<u-button @click="getCode" type="primary" :plain="true" text="镂空">{{tips}}</u-button>
					</view>
					<view style="margin-top: 20rpx;">
						<u--input placeholder="请设置新密码" border="surround" clearable @change="change1" password="password"
							v-model="password"></u--input>
						<u--input placeholder="确认密码" border="surround" clearable @change="change2" password="password1"
							v-model="password1"></u--input>
					</view>


					<view style="width: 500rpx;margin-top: 15rpx;">
						<u-modal :show="showqr" :title="title" :content='content' @confirm="confirm" @cancel="cancel"
							showCancelButton="true" width="500rpx"></u-modal>
						<u-button @click="Yanzheng()" :plain="true" type="primary" text="确认修改密码"></u-button>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		restPasswordApi
	} from '../../../api/myModel';
	export default {
		data() {
			return {
				ShoujiURL:this.$baseURL + '/profile/upload/2025/05/10/shouji_20250507101040A029_20250510150316A036.png',
				phone: "",
				tips: '',
				// refCode: null,
				seconds: 60,
				value: '',
				yanz1: '',
				yanz2: 1,
				password: "",
				password1: "",
				show: false,
				showqr: false,
				title: '确认修改',
				content: '修改密码后，如果忘记密码，需手机验证重新修改',
				/* page-a:1,
				page-b:2, */
				restPasswordData: {
					telephone: "",
					password: ""
				},
				model1: {
					user: {
						yanzhengm: '', //验证码
					}
				},


			}
		},
		onReady() {
			// 注意这里不能将一个组件赋值给data的一个变量，否则在微信小程序会
			// 造成循环引用而报错，如果你想这样做，请在非data中定义refCode变量
			// this.refCode = this.$refs.uCode;
		},
		onLoad(option) {
			this.phone = option.telephone
		},
		methods: {
			change(e) {
				this.yanz1 = 0;
				console.log('内容改变，当前值为：' + e);
			},
			finish(e) {
				this.yanz1 = 1;
				this.model1.user.yanzhengm = e;
				console.log('输入结束，当前值为：' + e);
			},
			close() {
				this.show = !this.show;
				// console.log('close');
			},

			change1(e) {
				this.model1.user.newPassword = e;
				console.log('change1', e);
			},
			change2(e) {
				this.model1.user.confirmPassword = e;
				console.log('change2', e);
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				uni.$u.toast('倒计时结束');
			},
			start() {
				uni.$u.toast('倒计时开始');
			},
			confirm() {
				if (this.yanz2 == 2) {
					this.showqr = false;
					this.restPasswordData.telephone = this.phone
					this.restPasswordData.password = this.password
					restPasswordApi(this.restPasswordData).then((res) => {
						if (res.code == "200") {
							// 现在修改成功后页面直接跳转，用户没法看修改成功这个弹框
							// 你看看你能不能想办法让用户知道密码修改成功
							uni.showToast({
								title: '修改成功',
								icon: 'success',
								duration: 2000
							});
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/myModel/my/my'
								});
							}, 1500)

						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					})
				} else if (this.yanz2 == 1) {
					this.showqr = false;
				}
			},



			cancel() {
				this.showqr = false;
			},
			Yanzheng() {

				if (this.model1.user.newPassword == '' || this.model1.user.confirmPassword == '') {
					console.log("两次输入的密码不一致");
					this.content = "密码不能为空";
					this.title = "",
						this.showqr = true;
					this.yanz2 = 1;
				} else {
					if (this.model1.user.newPassword !== this.model1.user.confirmPassword) {
						console.log("两次输入的密码不一致");
						this.content = "两次输入的密码不一致,请重新输入";
						this.title = "",
							this.showqr = true;
						this.yanz2 = 1;
					} else if (this.model1.user.newPassword == this.model1.user.confirmPassword) {
						if (this.yanz1 == 1) {
							console.log("两次输入的密码一致");
							this.content = "修改密码后，如果忘记密码，需手机验证重新修改";
							this.showqr = true;
							this.yanz2 = 2;
						} else if (this.yanz1 == 0) {
							this.content = "请输入4位验证码";
							this.title = "",
								this.showqr = true;
							this.yanz2 = 1;
						}
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.wrap2 {
		width: 195rpx;
		float: right;
		margin-top: -80rpx;
	}

	.u-input--radius.data-v-fdbb9fe6,
	.u-input--square.data-v-fdbb9fe6 {
		margin-top: 40rpx;
	}

	.u-button--plain.data-v-3bf2dba7 {
		margin-top: 20rpx;
	}

	.kuang {
		padding: 60rpx;
		font-size: 40rpx;
		color: #898a8b;
		background-color: #ffffff;
		height: 950rpx;
		width: 500rpx;
		border-radius: 30rpx;
		margin: 60rpx;

	}
</style>